<template>
  <div>
    <template>
      <el-form :inline="true" class="demo-form-inline" style="text-align: left">
        <el-form-item label="在线状态">
          <el-dropdown>
            <el-button type="type">
              请选择在线状态<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>0</el-dropdown-item>
              <el-dropdown-item>1</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="触发源">
          <el-dropdown>
            <el-button type="type">
              请选择触发源状态<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>0</el-dropdown-item>
              <el-dropdown-item>1</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-form-item>
            <el-button type="primary" @click="getsmartLamp">查询</el-button>
            <el-button type="info" @click="smartLampreset">重置</el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getsmartLamp">新增</el-button>
          <el-button type="primary" @click="smartLampreset">编辑</el-button>
          <el-button type="primary" @click="dialogVisible = true"
            >删除</el-button
          >
          <el-button type="primary" @click="deletedata">开启</el-button>
          <el-button type="primary" @click="deletedata">关闭</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="bucketNum" label="桶位编号" width="180">
        </el-table-column>
        <el-table-column prop="localArea" label="所在区域" width="180">
        </el-table-column>
        <el-table-column prop="connectionStatus" label="连接状态" width="180">
                    <template slot-scope="scope">
            <span v-if="scope.row.connectionStatus == true" style="color: green">开</span>
            <span v-if="scope.row.connectionStatus == false" style="color: red">关</span>
          </template>
        </el-table-column>
        <el-table-column prop="person" label="负责人" width="180">
        </el-table-column>
        <el-table-column prop="personPhone" label="负责人联系方式" width="180">
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { getSmartGarbageCanData } from "@/api/iotInfo/SmartGarbageCan";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      from: {},
    };
  },
  created() {
    this.getSmartGarbageCanData();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getSmartGarbageCanData() {
      getSmartGarbageCanData().then((res) => {
        this.tableData = res.data.data;
      });
    },
  },
};
</script>